<template>
	<view v-if="partInfo.pk_id"
		:style="{ '--price': vuex_config.price,'--color':vuex_config.themeColor1, 'padding-top': '2rpx' }">
		<view class="page_item order_box" v-if="partInfo.info_price > 0 && partInfo.order_no">
			<view class="pay_title">支付信息</view>
			<view class="pay_main">
				<view class="pay_item">
					<view class="pay_label">支付金额</view>
					<view class="pay_cont price">
						￥{{ partInfo.pay_status === 0 ? partInfo.info_price * partInfo.num : partInfo.price }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">支付方式</view>
					<view class="pay_cont price">{{ payTypeObj[partInfo.pay_type] }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">支付状态</view>
					<view class="pay_cont price">{{ payStautsOption[partInfo.pay_status] }}</view>
				</view>
				<view class="pay_item">
					<view class="pay_label">下单时间</view>
					<view class="pay_cont">{{ partInfo.date_creation | formatTime }}</view>
				</view>
			</view>
		</view>
		<view class="page_item main_cont">
			<view class="form_cont">
				<view class="title">姓名</view>
				<view class="cont">{{ partInfo.name }}</view>
			</view>
			<view class="form_cont">
				<view class="title">电话</view>
				<view class="cont">{{ partInfo.phone }}</view>
			</view>
			<view class="form_cont">
				<view class="title">公司</view>
				<view class="cont">{{ partInfo.company || '' }}</view>
			</view>
			<view class="form_cont">
				<view class="title">职务</view>
				<view class="cont">{{ partInfo.job || '' }}</view>
			</view>
			<view class="form_cont">
				<view class="title">是否需要就餐</view>
				<view class="cont">{{ partInfo.is_restaurant == 1 ? '就餐' : '不需要' }}</view>
			</view>
			<view class="form_cont">
				<view class="title">参与人数</view>
				<view class="cont">{{ partInfo.num }}</view>
			</view>
			<view class="form_cont" v-if="!partInfo.info_price || partInfo.pay_status == 1">
				<view class="title">排位</view>
				<view class="cont">{{ partInfo.ranking || '随机入座' }}</view>
			</view>
			<view class="form_cont" v-if="partInfo.remarks">
				<view class="title">报名备注</view>
				<view class="cont">
					<view class="text_area">{{ partInfo.remarks }}</view>
				</view>
			</view>
			<view class="form_cont" v-if="partInfo.meeting_signin[0]">
				<view class="title">签到时间</view>
				<view class="cont">{{ partInfo.meeting_signin[0].date_create | formatTime }}</view>
			</view>
			<view class="form_cont" v-if="partInfo.meeting_signin[0]">
				<view class="title">签到备注</view>
				<view class="cont">
					<view class="text_area">{{ partInfo.meeting_signin[0].remarks }}</view>
				</view>
			</view>

		</view>


		<view class="glo_bot_main" v-if="partInfo.info_price > 0 && partInfo.pay_status != 1">
			<view class="back_box">
				<view class="back_btn" @click="goBack">返回{{isShare?'查看会议信息':''}}</view>
			</view>
			<view class="glo_bot_fix">
				<view class="glo_button" @click="goPay" :style="{ background: vuex_config.themeColor1 }">
					立即支付
					<text class="sign">￥</text>
					<text class="price_total">{{ (partInfo.info_price * partInfo.num).toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<template v-else>
			<view class="page_item form_main" v-if="!partInfo.meeting_signin[0] && !partInfo.signMsg">
				<view class="pay_box">
					<view class="title">签到人数</view>
					<u-number-box :min="1" v-model="dataForm.num"></u-number-box>
				</view>
				<view class="form_item">
					<view class="title">备注</view>
					<textarea class="input input_textarea" type="textarea" v-model="dataForm.remarks" />
				</view>
			</view>
			<view class="back_box">
				<view class="back_btn" @click="goBack">返回{{isShare?'查看会议信息':''}}</view>
			</view>
			<!-- 不需要支付 或者 需要支付且已支付 -->
			<view class="glo_bot_main">
				<view class="glo_bot_fix">
					<view class="glo_button" @click="judegeSign"
						:style="{ background: partInfo.signMsg ? '#a9aaac' : vuex_config.themeColor1 }">
						{{ !partInfo.meeting_signin[0] ? (partInfo.signMsg || '立即签到') : '已签到' }}
					</view>
				</view>
			</view>
		</template>




		<sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		props: {
			isShare: {
				type: Boolean,
				default: false
			},
			meetId: {
				type: Number,
				default: 0
			},
			partInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		filters: {
			formatTime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		components: {},
		data() {
			return {
				dataForm: {
					num: 1, // 实到人数
					remarks: ''
				},
				payTypeObj: {
					0: '未支付',
					1: '微信支付',
					2: '余额支付',
					3: '线下支付',
					4: '微信支付',
					5: '支付宝支付'
				},
				payStautsOption: {
					0: '未支付',
					1: '已支付'
				}
			};
		},

		mounted() {
			this.dataForm.num = this.partInfo.num;
		},

		methods: {
			// 提示是否签到
			judegeSign() {
				if (!this.partInfo.meeting_signin[0] && !this.partInfo.signMsg) {
					uni.showModal({
						title: '签到',
						content: `一共${this.dataForm.num}人，确认签到?`,
						success: res => {
							if (res.confirm) {
								this.getSignin();
							}
						}
					});
				}
			},
			// 确定签到
			getSignin() {
				this.$resPost('AddMeetingSignin', {
					...this.dataForm,
					meeting_users_id: this.partInfo.pk_id
				}).then(({
					data
				}) => {
					this.$emit('subFinsh');
				});
			},
			goPay() {
				this.$refs.payCheck.open(this.partInfo.info_price * this.partInfo.num);
			},
			// 开始支付
			onPayPrice(e) {
				let pay_type = e.pay_type
				let updateParams = {}
				if(obj.business_appid){
					updateParams.business_appid = obj.business_appid
				}
				this.$loading();
				let opts = {
					totalPrice: this.detail.total_amount, // 支付金额
					order_type: 13, // 订单类型
					remark: '自定义表单订单', // 余额扣款备注
					updateApi: 'UpdateOrderStatus',
					pay_type: pay_type || 1, // 支付方式
					updateParams:{...updateParams}
				};
				this.setSubMsg().then(() => {
					this.judgeTypeToPay({
							pk_id: this.detail.order_id,
							order_no: this.detail.order_no
						}, opts)
						.then(() => {
							this.$emit('subFinsh');
						})
						.catch(err => {
							if (err) {
								this.$toast({
									title: err
								});
							}
						});
				});
			},
			goBack() {
				this.$emit('goBack')
			}
		}
	};
</script>

<style scoped lang="scss">
	.page_item {
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.order_box {
		padding: 0 24rpx;

		.pay_title {
			font-weight: bold;
			font-size: 30rpx;
			padding: 20rpx 0 10rpx;
		}

		.pay_main {
			padding: 0 0 30rpx;

			.pay_item {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;
				font-size: 28rpx;

				.pay_label {
					color: #999;
					margin-right: 30rpx;
				}

				.pay_cont {
					flex: 1;
					overflow: hidden;
					text-align: right;

					&.price {
						color: var(--price);
					}
				}
			}
		}
	}

	.main_cont {
		padding: 0 24rpx;

		.form_cont {
			display: flex;
			padding: 24rpx 0;
			border-bottom: 1px solid #f5f5f5;

			&:last-of-type {
				border-bottom: none;
			}

			.title {
				line-height: 40rpx;
				font-size: 28rpx;
				color: #999;
				margin-right: 30rpx;
			}

			.cont {
				text-align: right;
				flex: 1;
				overflow: hidden;
				line-height: 40rpx;

				.text_area {
					display: inline-block;
					width: auto;
					max-width: 100%;
					text-align: left;
					text-indent: 2em;
				}
			}
		}
	}

	.form_main {
		padding: 20rpx 24rpx 0;
		background-color: #fff;

		.form_item {
			.title {
				font-weight: bold;
				padding: 30rpx 0;
			}

			padding-bottom: 10rpx;

			.input {
				border: 1px solid #dde5ed;
				border-radius: 6rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				margin-bottom: 30rpx;

				&.input_textarea {
					width: 100%;
					padding: 10rpx 20rpx;
					line-height: 42rpx;
					height: 168rpx;
				}
			}
		}

		.pay_box {
			padding-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.sign {
		font-size: 26rpx;
	}


	.back_box {
		display: flex;
		flex-direction: row-reverse;
		margin: 20rpx 0;
		padding: 0 20rpx;

		.back_btn {
			background-color: var(--color);
			color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
		}
	}
</style>
